<!-- src/views/LoginDevices.vue -->
<template>
  <div>
    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">
          登录设备管理
        </CardTitle>
        <CardDescription class="text-muted-foreground">
          以下是所有登录设备列表
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>设备名称</TableHead>
                <TableHead>系统</TableHead>
                <TableHead>登录时间</TableHead>
                <TableHead>登录地点</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow v-for="device in devices" :key="device.id">
                <TableCell>{{ device.name }}</TableCell>
                <TableCell>{{ device.os }}</TableCell>
                <TableCell>{{ device.loginTime }}</TableCell>
                <TableCell>{{ device.location }}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardDescription
} from '@/components/ui/card'

import {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell
} from '@/components/ui/table'



const devices = ref([
  { id: 1, name: "iPhone 12", os: "iOS", loginTime: "2023-06-01 14:30", location: "北京" },
  {
    id: 2,
    name: "MacBook Pro", os: "iOS",
    loginTime: "2023-05-30 09:15",
    location: "上海",
  },
  { id: 3, name: "iPad Air", os: "iOS", loginTime: "2023-05-28 18:45", location: "广州" },
]);

const logoutDevice = (deviceId: number) => {
  // 实现退出设备登录的逻辑
  console.log("Logging out device:", deviceId);
};
</script>
